import React from "react";
import './TodoMain.css';
import store from "../../../redux/store";
import { asyncCheckTodo, asyncRemoveTodo } from "../../../redux/reducers/TodosReducer";
export default function TodoMain() {
  return (
    <ul className="todo-main">
      {
        store.getState().todos.map(item => {
          return <li key={item.id}>
                  <label>
                    <input type="checkbox" checked={item.done} 
                    onChange={(e) => {
                      //异步的更新任务的完成状态
                      store.dispatch(asyncCheckTodo(item.id, e.target.checked))
                    }} />
                    <span className={item.done ? "done" : null}>{item.title}</span>
                  </label>
                  <button className="btn btn-danger" onClick={() => {
                    //提醒 sweetalert2
                    if(!window.confirm('您确定要删除该条任务么?')) return;
                    //删除
                    store.dispatch(asyncRemoveTodo(item.id));
                  }}>删除</button>
                </li>
        })
      }
    </ul>
  );
}
